<template>
  <div class="user">
    <div class="common-form">新增活动会场</div>
    <div class="product-content">
      <el-form ref="form" :model="form" :rules="formRules" label-width="150px">
        <el-form-item
          label="活动标题"
          prop="name"
          :rules="[{ required: true, message: ' ' }]"
        >
          <el-input
            type="text"
            v-model="form.name"
            placeholder="请输入活动标题"
            class="max-w460"
          ></el-input>
        </el-form-item>
        <el-form-item label="背景图" prop="imageId">
          <el-row>
            <el-button type="primary" @click="openUpload">选择图片</el-button>
            <div v-if="form.imageId != ''" class="img">
              <img :src="filePath" width="100" height="100" />
            </div>
          </el-row>
        </el-form-item>
        <el-form-item
          label="活动日期"
          prop="value1"
          :rules="[{ required: true, message: ' ' }]"
        >
          <div class="block">
            <span class="demonstration"></span>
            <el-date-picker
              v-model="form.value1"
              type="datetimerange"
              value-format="YYYY-MM-DD"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
        </el-form-item>
        <div class="common-form">礼包设置</div>
        <el-form-item label="优惠券 ">
          <el-checkbox v-model="form.isCoupon">
            只能选择不限等级、不限数量、不限领取数量的优惠券</el-checkbox
          >
        </el-form-item>
        <el-form-item label="" v-if="form.isCoupon">
          <el-button size="large" type="primary" @click="addCoupon()"
            >添加</el-button
          >
          <br /><span></span>
          <el-table :data="tableData" style="width: 60%">
            <el-table-column prop="couponId" label="优惠券id">
            </el-table-column>
            <el-table-column prop="name" label="优惠券"> </el-table-column>
            <el-table-column
              prop="couponNum"
              label="数量"
              :rules="[{ required: true, message: ' ' }]"
            >
              <template #default="scope">
                <el-input
                  type="number"
                  v-model="scope.row.couponNum"
                  placeholder=""
                  min="1"
                  max="10"
                  @blur="max10"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作">
              <template #default="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="delcoupon(scope.row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="商品">
          <el-checkbox v-model="form.isProduct">只能选择单规格商品</el-checkbox>
        </el-form-item>
        <el-form-item
          v-if="form.isProduct"
          label="商品选购数量"
          prop="productNum"
          :rules="[{ required: true, message: ' ' }]"
        >
          <el-input
            type="number"
            v-model="form.productNum"
            placeholder="请输入商品选购数量"
            class="max-w460"
          ></el-input>
        </el-form-item>
        <el-form-item label="" v-if="form.isProduct">
          <el-button size="large" type="primary" @click="addProduct()"
            >添加</el-button
          >
          <br /><span></span>
          <el-table :data="prodcutData" style="width: 40%">
            <el-table-column prop="productName" label="商品"> </el-table-column>
            <el-table-column prop="product_" label="操作">
              <template #default="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="delProduct(scope.row)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item label="积分 ">
          <el-checkbox v-model="form.isPoint">
            不受每人每日限领规则限制</el-checkbox
          >
        </el-form-item>
        <el-form-item label="积分数量" v-if="form.isPoint">
          <el-input type="number" v-model="form.point" class="max-w460">
            <template #append>积分</template>
          </el-input>
        </el-form-item>
        <div class="common-form">购买设置</div>
        <el-form-item
          label="购买金额"
          prop="money"
          :rules="[{ required: true, message: ' ' }]"
        >
          <el-input type="number" v-model="form.money" class="max-w460">
            <template #append>元</template>
          </el-input>
        </el-form-item>

        <el-form-item label="会员购买等级 ">
          <el-radio-group v-model="form.isGrade">
            <el-radio :label="0">不限</el-radio>
            <el-radio :label="1">指定等级</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="会员等级 " v-if="form.isGrade">
          <el-select
            v-model="form.gradeIds"
            multiple
            placeholder="请选择"
            style="width: 460px"
          >
            <el-option
              v-for="(item, index) in Grade"
              :key="index"
              :label="item.name"
              :value="item.gradeId"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="购买次数 ">
          <el-radio-group v-model="form.isTimes">
            <el-radio :label="0">不限</el-radio>
            <el-radio :label="1">限购</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="" v-if="form.isTimes">
          <el-input type="number" v-model="form.times" class="max-w460">
            <template #prepend>每人限购</template>
            <template #append>次</template>
          </el-input>
        </el-form-item>
        <div class="common-form">发放设置</div>
        <el-form-item
          label="发放数量"
          prop="totalNum"
          :rules="[{ required: true, message: ' ' }]"
        >
          <el-input
            type="number"
            v-model="form.totalNum"
            placeholder="请输入发放数量"
            class="max-w460"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="二维码"
          prop="codeType"
          :rules="[{ required: true, message: ' ' }]"
        >
          <el-radio-group v-model="form.codeType">
            <el-radio :label="10">一批一码</el-radio>
            <el-radio :label="20">一物一码</el-radio>
          </el-radio-group>
          <div class="gray9">
            一批一码：这个活动使用一个二维码；一物一码：生成的每个二维码不一样；
          </div>
        </el-form-item>
      </el-form>
      <!--提交-->
      <div class="common-button-wrapper">
        <el-button type="info" @click="gotoBack">返回</el-button>
        <el-button type="primary" @click="onSubmit" :loading="loading"
          >提交</el-button
        >
      </div>
    </div>
    <!--上传图片组件-->
    <Upload
      v-if="isupload"
      :isupload="isupload"
      :type="type"
      @returnImgs="returnImgsFunc"
      >上传图片</Upload
    >
    <!--选择优惠券-->
    <GetCoupon
      v-if="open_add"
      :open_add="open_add"
      @closeDialog="closeProductDialogFunc($event)"
      >选择优惠券弹出层</GetCoupon
    >
    <!--选择商品-->
    <Product
      :isProduct="isProduct"
      :excludeIds="excludeIds"
      :islist="false"
      @closeDialog="closeProductFunc"
    ></Product>
  </div>
</template>
<script>
import UserApi from "@/api/user.js";
import PackageApi from "@/api/package.js";
import GetCoupon from "@/components/coupon/GetCoupon.vue";
import Product from "@/components/product/Product.vue";
import Upload from "@/components/file/Upload.vue";
export default {
  components: {
    /*选择优惠券件*/
    GetCoupon,
    Product,
    Upload,
  },
  data() {
    return {
      form: {
        isCoupon: false,
        isProduct: false,
        coupon: [],
        product: [],
        couponNum: 1,
        isPoint: false,
        point: 0,
        isTimes: 0,
        times: 0,
        isGrade: 0,
        gradeIds: [],
        value1: [],
        name: "",
        productName: "",
        totalNum: "",
        imageId: "",
        productNum: "",
        codeType: 10,
      },
      /*等级*/
      Grade: {},
      /*优惠券*/
      tableData: [],
      prodcutData: [],
      loading: false,
      open_add: false,
      /*是否打开选择商品*/
      isProduct: false,
      excludeIds: [],
      /*是否打开图片选择*/
      isupload: false,
      formRules: {
        imageId: [
          {
            required: true,
            message: "请上传背景图",
            trigger: "blur",
          },
        ],
      },
      /*左边长度*/
      formLabelWidth: "120px",
    };
  },
  created() {
    /*获取等级*/
    this.getGradeList();
  },
  methods: {
    /*获取等级*/
    getGradeList() {
      let self = this;
      let Params = {};
      Params.pageIndex = self.curPage;
      Params.listRows = self.pageSize;
      UserApi.gradelist(Params, true)
        .then((res) => {
          self.Grade = res.data.records;
        })
        .catch((error) => {});
    },
    /*添加优惠券*/
    addCoupon() {
      this.open_add = true;
    },
    /*添加商品*/
    addProduct() {
      this.isProduct = true;
    },
    /*关闭优惠券*/
    closeProductDialogFunc(e) {
      let self = this;
      self.open_add = e.openDialog;
      console.log(e.params);
      if (e.type == "success") {
        if (self.form.coupon.length < 1) {
          self.form.coupon.push({
            couponId: e.params.couponId,
            couponNum: e.params.totalNum,
          });
          self.tableData.push({
            couponId: e.params.couponId,
            name: e.params.name,
            couponNum: 1,
          });
        } else {
          let flag = true;
          self.form.coupon.forEach((item, index) => {
            if (item.couponId == e.params.couponId) {
              flag = false;
            }
          });
          if (flag) {
            self.form.coupon.push({
              couponId: e.params.couponId,
              couponNum: e.params.totalNum,
            });
            self.tableData.push({
              couponId: e.params.couponId,
              name: e.params.name,
              couponNum: 1,
            });
          } else {
            ElMessage.error("请勿重复添加");
          }
        }
      }
    },
    /*关闭商品*/
    closeProductFunc(e) {
      let self = this;
      self.isProduct = e.openDialog;
      if (e.type == "success") {
        self.form.product.push(e.params.productId);
        self.prodcutData.push(e.params);
      }
    },
    delProduct(item) {
      let self = this;
      let n = self.prodcutData.indexOf(item);
      self.prodcutData.splice(n, 1);
      self.form.product.splice(n, 1);
    },
    delcoupon(item) {
      let self = this;
      let n = self.tableData.indexOf(item);
      self.tableData.splice(n, 1);
      self.form.coupon.splice(n, 1);
    },
    /*提交表单*/
    onSubmit() {
      let self = this;
      let form = self.form;
      form.coupon = self.tableData;
      //form.coupon = JSON.stringify(form.coupon);
      form.startTime = form.value1[0];
      form.endTime = form.value1[1];
      //form.delete(value1);
      if (!self.form.isCoupon && !self.form.isProduct && !self.form.isPoint) {
        ElMessage.error("请至少设置一个礼包设置选项");
        return;
      }
      if (self.form.isCoupon && self.form.coupon.length <= 0) {
        ElMessage.error("请至少设置一个优惠券");
        return;
      }
      if (self.form.isProduct && self.form.product.length <= 0) {
        ElMessage.error("请至少设置一个商品");
        return;
      }
      if (self.form.isPoint && self.form.point <= 0) {
        ElMessage.error("设置积分不能为0");
        return;
      }
      self.$refs.form.validate((valid) => {
        if (valid) {
          self.loading = true;
          PackageApi.savePackage(form, true)
            .then((data) => {
              self.loading = false;
              if (data.code == 1) {
                ElMessage({
                  message: data.msg,
                  type: "success",
                });
                self.$router.push("/plus/package/index");
              } else {
                self.loading = false;
              }
            })
            .catch((error) => {
              self.loading = false;
            });
        }
      });
    },
    /*上传*/
    openUpload(e) {
      this.type = e;
      this.isupload = true;
    },
    /*获取图片*/
    returnImgsFunc(e) {
      if (e != null && e.length > 0) {
        this.filePath = e[0].filePath;
        this.form.imageId = e[0].fileId;
      }
      this.isupload = false;
    },
    /*返回上一页面*/
    gotoBack() {
      this.$router.back(-1);
    },
    max10(e) {
      if (e.target.value >= 10) {
        e.target.value = 10;
      }
    },
  },
};
</script>
